<template>
    <div>
        <!-- 
            show-file-list	是否显示已上传文件列表	boolean
            auto-upload	是否在选取文件后立即进行上传	boolean	—	true
            action	必选参数，上传的地址	string
            limit	最大允许上传个数	number
            ist-type	文件列表的类型	string	text/picture/picture-card	text
            on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
            on-preview	点击文件列表中已上传的文件时的钩子	function(file)
            file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
         -->
        <el-dialog :title="sortInfo.isAdd ? '添加商品分类' : '编辑商品分类'" center :visible.sync="sortInfo.isShow"
            :before-close="cancel">
            <el-form :model="sortForm" :rules="rules" ref="sortRef">
                <el-form-item label="上级分类" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="sortForm.pid" placeholder="请选择上级分类">
                        <el-option label="顶级分类" :value="0"></el-option>
                        <el-option v-for="item in $store.getters['sort/getSort']" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="catename">
                    <el-input v-model="sortForm.catename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  v-if="sortForm.pid != 0 " label="图片" :label-width="formLabelWidth">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList" :limit="1"
                        :on-change="changeImg" :on-preview="onPreview">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="sortForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { cateadd, cateinfo, cateedit } from '../../request/api'
export default {
    props: ['sortInfo'],
    data() {
        return {
            formLabelWidth: '100px',
            sortForm: {
                pid: 0,//上级分类编号
                catename: '',//商品分类名称
                img: '',//图片(文件，一般用于二级分类)
                status: 1,//状态1正常2禁用
            },
            rules: {
                catename: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                pid: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
            },
            fileList: [],//上传图片框为空
            dialogImageUrl: '',//视图图片地址
            dialogVisible: false//是否显示视图图片
        }
    },
    methods: {
        // 子传父隐藏弹框
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 清空弹框内容
        reset() {
            this.sortForm = {
                pid: '',//上级分类编号
                catename: '',//商品分类名称
                img: '',//图片(文件，一般用于二级分类)
                status: 1,//状态1正常2禁用
            },
                // 清除校验
                this.$refs.sortRef.resetFields()
                // 清除图片
                this.fileList = []
        },
        // 编辑数据回显
        async lookup(id) {
            let res = await cateinfo({ id })
            this.sortForm = res.list
            this.sortForm.id = id
            // 如果有图片就显示，没有显示空
            this.fileList = this.sortForm.img ? [{url:this.sortForm.img}] : []
        },
        confirm() {
            this.$refs.sortRef.validate((val) => {
                if (val) {
                    if (this.sortInfo.isAdd) {//添加
                        cateadd(this.sortForm)
                        .then(res=>{
                            if(res.code==200){
                                this.$store.dispatch('sort/GetSortInfo',res.list)
                                this.cancel()
                                this.$message.success(res.msg)
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    } else {//编辑
                        cateedit(this.sortForm)
                        .then(res=>{
                            if(res.code==200){
                                this.$store.dispatch('sort/GetSortInfo',res.list)
                                this.cancel()
                                this.$message.success(res.msg)
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        },
        // 图片发生改变时触发
        changeImg(file, fileList) {
            console.log(file, 'file');
            console.log(fileList, 'fileList');
            this.sortForm.img = file.raw
        },
        // 点击图片显示视图
        onPreview(file){
            this.dialogImageUrl = file.url
            this.dialogVisible =true
        }

    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>